<!DOCTYPE html>
<html>
<head>
    <style>
        div.header,div.footer
        {
            width: 1000px;
            height: 200px;
            background-color: bisque;
            text-align: center;
            line-height: 200px;
        }
        div.middle
        {
            background-color: #c1b7b742;
            width: 1000px;
            height: 500px;
        } 
        div.center
        {
            background-color: #93ddb4aa;
            width: 600px;
            height: 500px;
            float: left;
        }
        div.left,div.right
        {
            width: 200px;
            height: 500px;
            float: left;
        }
        .header,.footer
        {
            font-size: 40px;
        }
       .left
       {
        font-size: 28px;
       }
       .right
       {
        font-size: 28px;
       }
       .center
       {
        font-size: 48px;
       }
    </style>
    <meta charset="UTF-8" />
    <title>浮动</title>
</head>
<body>
    <!-- 浮动 -->
    <div class="header">
        <h2>浮动知识点</h2>
    </div>
    <div class="middle">
        <div class="left">
            <p>浮动使用属性为:float</p>
            <p>浮动是脱离文档流的</p>
            <p>当一个元素浮动时,后面的元素会无视这个元素</p>
        </div>
        <div class="center">
            <p>clear属性值:<br>清除属性,规定哪一侧不允许出现浮动元素
            </p>
        </div>
        <div class="right">
            <p>属性值有<br>
                1.left(左浮动)<br>
                2.right(右浮动)<br>
                3.none(不显示)<br>
                4.inherit(继承父元素float属性)</p>
        </div>
    </div>
    <div class="footer">
        <h2>&copy;版权归作者</h2>
    </div>
</body>
</html>